<template>
	<view class="page_bg">
		<z-paging ref="paging" class="z-paging page_bg" v-model="orderList" @query="getOrderList"
			:hide-loading-more-when-no-more-by-limit="5">
			<view class="list-item flex-col" v-for="item in orderList" :key="item._id" @click="checkDetail(item)">
				<text class="text_1">订单编号：{{item.order_no}}</text>
				<image src="/static/local/f763a2c78a597fab3f429dc5644387de.png" class="image_2" />
				<view class="center-group flex-row">
					<block v-if="item.courseInfo&&item.courseInfo.goods_thumb">
						<u-image :src="item.courseInfo.goods_thumb" :lazy-load="true" width="250" height="160"
							border-radius="8rpx" mode="aspectFill">
						</u-image>
						<view class="right-group flex-col">
							<text class="text_3">{{item.title}}</text>
							<text class="text_5">￥{{item.total_fee / 100}}</text>
						</view>
					</block>
					<block v-else>
						<view class="right-group-text">
							<text class="text_3">{{item.title}}</text>
							<text class="text_5">￥{{item.total_fee / 100}}</text>
						</view>
					</block>
				</view>
				<view class="bottom-group justify-between">
					<text class="text_7">{{orderStatus(item.status)}}</text>
					<view style="display: flex;">
						<block v-if="item.status == 1 && item.type!='recharge'">
							<view class="flex-col items-center text-wrapper del" @click.stop="continueBuy(item)">
								<text>继续支付</text>
							</view>
						</block>
						<view class="flex-col items-center text-wrapper"
							@click.stop="popShow = true;selectId = item._id">
							<text>删除订单</text>
						</view>
						<view class="flex-col items-center text-wrapper">
							<text>查看详情</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<u-modal v-model="popShow" content="确认删除该订单么？" show-cancel-button @confirm="remove" @cancel="selectId = ''">
		</u-modal>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// 订单列表
				orderList: [],
				// 选中订单
				selectId: '',

				popShow: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		computed: {
			// 订单状态
			orderStatus() {
				return (status) => {
					switch (status) {
						case 1:
							return '待付款';
						case 2:
							return '已付款';
						case 3:
							return '退款审核中';
						case 4:
							return '已退款';
						case 5:
							return '退款中';
						case -1:
							return '已取消付款/退款';
						case -2:
							return '退款拒绝';
						case -3:
							return '退款失败';
					}
				}
			}
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			// 获取订单列表
			getOrderList(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/order/kh/list',
					title: '获取中...',
					data: { pageIndex: pageNo, pageSize: pageSize, need_user_info: true },
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				})
			},
			// 查看详情
			checkDetail(item) {
				// 订单数据存入本地
				vk.setStorageSync('order-detail', item);
				uni.vk.navigateTo('./order-detail')
			},
			// 删除订单
			remove() {
				vk.callFunction({
					url: 'client/order/kh/deleteOrder',
					title: '删除中...',
					data: { id: that.selectId },
					success: function(data) {
						that.selectId = ''
						that.$refs.paging.reload()
					}
				})
			},
			// 继续支付
			continueBuy(item) {
				uni.vk.redirectTo('/pages/payment/payType?order_id=' + item._id)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		padding: 20rpx 20rpx 0;
		background: #F5F5F5;
	}

	.list-item {
		padding: 31rpx 0 26rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 12rpx;
		margin-bottom: 20rpx;

		.text_1 {
			margin-left: 20rpx;
			color: rgb(51, 51, 51);
			font-size: 30rpx;
			line-height: 36rpx;
			white-space: nowrap;
		}

		.image_2 {
			margin-top: 24rpx;
			width: 94.5vw;
			height: 0.5vw;
		}

		.center-group {
			margin-top: 28rpx;
			padding-left: 20rpx;
			padding-right: 18rpx;

			.right-group {
				margin-left: 26rpx;
				margin-bottom: 4rpx;
				flex: 1 1 auto;

				.text_3 {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					line-height: 35rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.text_5 {
					margin-left: 7rpx;
					margin-top: 43rpx;
					color: rgb(246, 21, 21);
					font-size: 36rpx;
					line-height: 43rpx;
					white-space: nowrap;
				}
			}

			.right-group-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 0;
				flex: 1 1 auto;

				.text_3 {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					line-height: 35rpx;
				}

				.text_5 {
					margin: 0 6rpx 0 0;
					color: rgb(246, 21, 21);
					font-size: 36rpx;
					line-height: 43rpx;
					white-space: nowrap;
				}
			}
		}

		.bottom-group {
			margin-top: 28rpx;
			padding: 0 20rpx;

			.text_7 {
				margin: 10rpx 0 8rpx;
				color: rgb(255, 12, 12);
				font-size: 30rpx;
				line-height: 36rpx;
				white-space: nowrap;
				font-weight: bold;
			}

			.text-wrapper {
				padding: 14rpx 0 12rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;
				background-color: rgb(51, 51, 51);
				border-radius: 27rpx;
				width: 160rpx;
				height: 54rpx;
				margin-left: 10rpx;
			}

			.del {
				background-color: #F56C6C;
			}
		}
	}
</style>
